<template>
	<div class="row">
		<div class="col-xs-12 col-md-8 offset-md-2">
			<form @submit.prevent="addComments" class="card comment-form">
				<div class="card-block">
					<textarea class="form-control" v-model="body" placeholder="Write a comment..." rows="3"></textarea>
				</div>
				<div class="card-footer">
					<img :src="article.author.image" class="comment-author-img" />
					<button class="btn btn-sm btn-primary">Post Comment</button>
				</div>
			</form>

			<div v-if="comments">
				<div class="card" v-for="item in comments" :key="item.id">
					<div class="card-block">
						<p class="card-text">{{item.body}}</p>
					</div>
					<div class="card-footer">
						<nuxt-link :to="{
                            name:'profile',
                            params:{username:article.author.username}
                        }" class="comment-author">
							<img :src="item.author.image" class="comment-author-img" />
						</nuxt-link>
						&nbsp;
						<a href class="comment-author">{{item.author.username}}</a>
						<span class="date-posted">{{item.createdAt | date("MMM DD,YYYY")}}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getComments,addComments } from "@/api/article";
export default {
	name: "ArticleComment",
	props: {
		article: {
			type: Object,
			required: true,
		},
	},
	data() {
		return {
            comments: [],
            body:''
		};
	},
	async mounted() {
		const { data } = await getComments(this.article.slug);
		this.components = data.comments;
    },
    methods:{
       async addComments(){
            const {data} = await addComments(this.body,this.article.slug)
            this.comments.unshift(data.comment)
        }
    }
};
</script>

<style>
</style>